<template>
	<van-cell is-link icon="logistics" @click="showLocatePicker = true">
		<template #title>
			<div class="flex">
				<div><span class="mgr5 font-12">送至：</span><span>{{locateText}}</span></div><div class="stork-text">{{storkText}}</div>
			</div>
		</template>
	</van-cell>
	<van-cell class="ship-express">
		<template #title>
			<div>
				<span>选择收货区域后显示邮费</span>
			</div>
			<div>运费 30 元</div>
			<div>提货 <i>50</i> 件以上 iPhone 14：<em>免邮</em></div>
		</template>
	</van-cell>
	<van-popup v-model:show="showLocatePicker" round position="bottom">
		<van-picker title="收货地归属区域" :columns="locateOptions" @cancel="showLocatePicker = false"
					@confirm="onLocateChange" round v-model="locate"/>
	</van-popup>
</template>
<style lang="scss" scoped>
.ship-express {
	color:var(--font-third-color); font-size: 12px; padding: 5px 14px 5px 38px;
	i{color:var(--van-primary-color)}
}
.stork-text{height:16px;line-height:16px;color:var(--font-third-color); padding-left: 10px; margin-left:10px; border-left: 1px solid var(--border-color);}
</style>
<script lang="ts" setup>
const props=defineProps({
	// costInfo:{
	// 	type:Array<any>,
	// }
	storkTotal:{
		type:Number,
		required:false,
	}
})
//选择收货地址所在省市相关
const {locateOptions,locateText,locate} = useShipLocate()
const showLocatePicker=ref(false)
const onLocateChange = ({ selectedOptions }:any) => {
	showLocatePicker.value = false
	locateText.value = selectedOptions[0].text
	locate.value = [selectedOptions[0].value]
};

const storkText=computed(()=>{
	if(typeof props.storkTotal === 'number'){
		if(props.storkTotal>0)	return '有货'
		else '区域无货'
	}
	return ''

})
</script>
